import QtQuick 1.0

Item {
    id: idListHeader
    height: 70
    width: parent.width

    signal search()

    property alias searchText: idTextInputSearch.text

    Image {
        id: idBackground
        width: parent.width
        height: parent.height
        anchors.top: idListHeader.top
        source: "art/macapp_cellbg.png"
        smooth: true
        fillMode: Image.Stretch
    }

    Image {
        id: idBackgroundSearch
        anchors.top: idListHeader.top
        anchors.topMargin: 10
        anchors.left: idListHeader.left
        anchors.leftMargin: 10
        anchors.right: idListHeader.right
        anchors.rightMargin: 40
        source:"art/text-background.png"
        Behavior on opacity { NumberAnimation { duration: 100  } }
    }

    Image {
        id: idSearch
        width: 64
        height: 64;
        source: "art/search.png"
        smooth: true
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.verticalCenter: parent.verticalCenter
        MouseArea {
            id: mouseRegion
            anchors.fill: parent
            onClicked: {
                idListHeader.search()
            }
        }
        states: [
            State {
                name: "Pressed"
                when: mouseRegion.pressed == true
                PropertyChanges { target: idSearch; opacity: 0.5 }
            }
        ]
    }

    TextInput {
        id: idTextInputSearch
        anchors.top: idBackgroundSearch.top
        anchors.topMargin: 12
        anchors.left: idBackgroundSearch.left
        anchors.leftMargin: 10
        anchors.right: idBackgroundSearch.right
        anchors.rightMargin: 50
        height:  50
        text: "Search"
        font { bold: false; family: "Helvetica"; pixelSize:18 }
        color: "darkGray"
        smooth:  true

        onFocusChanged: if (focus) { state = "focused"; } else { state = ""; }

        states:  [
            State {
                name: "focused"
                PropertyChanges { target: idTextInputSearch; color: "black" }
                PropertyChanges { target: idTextInputSearch; text: "" }
            }
        ]
    }
}
